
<div class="page">
    <div class="row ui-section">
        <div class="col-lg-8 clearfix">
            <h2 class="section-header">Buttons</h2>
        </div>
        <div class="col-md-12">
            <div class="row">
                <div class="col-lg-4">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body text-center">
                            <md-button class="md-raised btn-w-md">Default</md-button><div class="divider"></div>
                            <md-button class="md-raised btn-w-md md-primary">Primary</md-button><div class="divider"></div>
                            <md-button class="md-raised btn-w-md md-accent">Accent</md-button><div class="divider"></div>
                            <md-button class="md-raised btn-w-md md-accent"><span class="fa fa-headphones"></span> With Icon</md-button><div class="divider"></div>
                            <md-button class="md-raised btn-w-md md-warn">Warn</md-button><div class="divider"></div>
                            <md-button ng-disabled="true" class="btn-w-md md-primary">Disabled</md-button><div class="divider"></div>
                            <div class="panel-label">Raised Buttons</div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body text-center">
                            <md-button class="btn-w-md">Default</md-button><div class="divider"></div>
                            <md-button class="btn-w-md md-primary">Primary</md-button><div class="divider"></div>
                            <md-button class="btn-w-md md-accent">Accent</md-button><div class="divider"></div>
                            <md-button class="btn-w-md md-accent"><span class="fa fa-headphones"></span> With Icon</md-button><div class="divider"></div>
                            <md-button class="btn-w-md md-warn">Warn</md-button><div class="divider"></div>
                            <md-button ng-disabled="true" class="btn-w-md md-primary">Disabled</md-button><div class="divider"></div>
                            <div class="panel-label">Flat Buttons</div>
                        </div>
                    </div>
                </div>                
            </div>
            <div class="row">
                <div class="col-lg-4">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body text-center">
                            <md-button class="md-fab" aria-label="headphones"><span class="fa fa-headphones"></span></md-button><div class="space"></div>
                            <md-button class="md-fab md-primary" aria-label="headphones"><span class="fa fa-headphones"></span></md-button><div class="space"></div>
                            <md-button class="md-fab md-warn" aria-label="headphones"><span class="fa fa-headphones"></span></md-button><div class="space"></div>
                            <md-button ng-disabled="true" class="md-fab" aria-label="headphones"><span class="fa fa-headphones"></span></md-button><div class="space"></div>
                            <div class="panel-label">FAB</div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body text-center">
                            <md-button class="md-icon-button" aria-label="headphones"><span class="fa fa-headphones"></span></md-button><div class="space"></div>
                            <md-button class="md-icon-button md-primary" aria-label="headphones"><span class="fa fa-headphones"></span></md-button><div class="space"></div>
                            <md-button class="md-icon-button md-warn" aria-label="headphones"><span class="fa fa-headphones"></span></md-button><div class="space"></div>
                            <md-button ng-disabled="true" class="md-icon-button" aria-label="headphones"><span class="fa fa-headphones"></span></md-button><div class="space"></div>
                            <div class="panel-label">Icon Button</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="row ui-section">
        <div class="col-lg-8 clearfix">
            <h2 class="section-header">Button Variables</h2>
        </div>
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-4">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body text-center">
                            <md-button class="md-raised btn-w-xs">xs</md-button><div class="divider"></div>
                            <md-button class="md-raised btn-w-sm md-primary">small</md-button><div class="divider"></div>
                            <md-button class="md-raised btn-w-md md-accent">middle</md-button><div class="divider"></div>
                            <md-button class="md-raised btn-w-lg md-accent">large</md-button><div class="divider"></div>
                            <div class="panel-label">Width</div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body text-center">
                            <md-button class="md-raised btn-xs">Extra small</md-button><div class="divider"></div>
                            <md-button class="md-raised btn-sm md-primary">Small Button</md-button><div class="divider"></div>
                            <md-button class="md-raised md-accent">Default button</md-button><div class="divider"></div>
                            <md-button class="md-raised btn-lg md-accent">Large button</md-button><div class="divider"></div>        
                            <div class="panel-label">Sizes</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body text-center">
                            <md-button class="md-raised btn-w-lg">Default</md-button><div class="divider"></div>
                            <md-button class="md-raised btn-w-lg md-primary">Primary</md-button><div class="divider"></div>
                            <md-button class="md-raised btn-w-lg md-accent">Accent</md-button><div class="divider"></div>
                            <md-button class="md-raised btn-w-lg md-warn">Warn</md-button><div class="divider"></div>
                            <div class="panel-label">Colors</div>
                        </div>
                    </div>                    
                </div>
                <div class="col-md-4">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body text-center">
                            <p>
                                <a ui-wave href="javascript:;" class="btn-icon btn-icon-sm btn-twitter"><i class="fa fa-twitter"></i></a>
                                <a ui-wave href="javascript:;" class="btn-icon btn-icon-sm btn-facebook"><i class="fa fa-facebook"></i></a>
                                <a ui-wave href="javascript:;" class="btn-icon btn-icon-sm btn-google-plus"><i class="fa fa-google"></i></a>
                                <a ui-wave href="javascript:;" class="btn-icon btn-icon-sm btn-pinterest"><i class="fa fa-pinterest"></i></a>

                                <a ui-wave href="javascript:;" class="btn-icon btn-icon-sm btn-instagram"><i class="fa fa-instagram"></i></a>
                                <a ui-wave href="javascript:;" class="btn-icon btn-icon-sm btn-rss"><i class="fa fa-rss"></i></a>
                            </p>
                            <p>
                                <a ui-wave href="javascript:;" class="btn-icon btn-icon-sm btn-tumblr"><i class="fa fa-tumblr"></i></a>
                                <a ui-wave href="javascript:;" class="btn-icon btn-icon-sm btn-linkedin"><i class="fa fa-linkedin"></i></a>
                                <a ui-wave href="javascript:;" class="btn-icon btn-icon-sm btn-dribbble"><i class="fa fa-dribbble"></i></a>
                                <a ui-wave href="javascript:;" class="btn-icon btn-icon-sm btn-youtube"><i class="fa fa-youtube"></i></a>
                                <a ui-wave href="javascript:;" class="btn-icon btn-icon-sm btn-github"><i class="fa fa-github"></i></a>
                                <a ui-wave href="javascript:;" class="btn-icon btn-icon-sm btn-skype"><i class="fa fa-skype"></i></a>
                            </p> 
                            <div class="divider"></div>
                            <p>
                                <a ui-wave href="javascript:;" class="btn-icon btn-icon-round btn-icon-sm btn-twitter"><i class="fa fa-twitter"></i></a>
                                <a ui-wave href="javascript:;" class="btn-icon btn-icon-round btn-icon-sm btn-facebook"><i class="fa fa-facebook"></i></a>
                                <a ui-wave href="javascript:;" class="btn-icon btn-icon-round btn-icon-sm btn-google-plus"><i class="fa fa-google"></i></a>
                                <a ui-wave href="javascript:;" class="btn-icon btn-icon-round btn-icon-sm btn-pinterest"><i class="fa fa-pinterest"></i></a>
                                <a ui-wave href="javascript:;" class="btn-icon btn-icon-round btn-icon-sm btn-instagram"><i class="fa fa-instagram"></i></a>
                                <a ui-wave href="javascript:;" class="btn-icon btn-icon-round btn-icon-sm btn-rss"><i class="fa fa-rss"></i></a>
                            </p>
                            <p>
                                <a ui-wave href="javascript:;" class="btn-icon btn-icon-round btn-icon-sm btn-tumblr"><i class="fa fa-tumblr"></i></a>
                                <a ui-wave href="javascript:;" class="btn-icon btn-icon-round btn-icon-sm btn-linkedin"><i class="fa fa-linkedin"></i></a>
                                <a ui-wave href="javascript:;" class="btn-icon btn-icon-round btn-icon-sm btn-dribbble"><i class="fa fa-dribbble"></i></a>
                                <a ui-wave href="javascript:;" class="btn-icon btn-icon-round btn-icon-sm btn-youtube"><i class="fa fa-youtube"></i></a>
                                <a ui-wave href="javascript:;" class="btn-icon btn-icon-round btn-icon-sm btn-github"><i class="fa fa-github"></i></a>
                                <a ui-wave href="javascript:;" class="btn-icon btn-icon-round btn-icon-sm btn-skype"><i class="fa fa-skype"></i></a>
                            </p>     
                            <div class="panel-label">Social icons</div>
                        </div>
                    </div>                    
                </div>
                <div class="col-md-4">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body text-center">
                            <div class="divider"></div>
                            <p>
                                <md-button aria-label="headphones" class="md-fab md-warn md-fab-xs"><span class="fa fa-headphones"></span></md-button> <span class="space"></span>
                                <md-button aria-label="headphones" class="md-fab md-primary md-fab-sm"><span class="fa fa-headphones"></span></md-button> <span class="space"></span>
                                <md-button aria-label="headphones" class="md-fab"><span class="fa fa-headphones"></span></md-button>
                            </p>
                            <div class="divider divider-lg"></div>
                            <p>
                                <md-button aria-label="headphones" class="md-fab"><span class="fa fa-headphones"></span></md-button> <span class="space"></span>
                                <md-button aria-label="headphones" class="md-fab md-primary md-fab-sm"><span class="fa fa-headphones"></span></md-button> <span class="space"></span>
                                <md-button aria-label="headphones" class="md-fab md-warn md-fab-xs"><span class="fa fa-headphones"></span></md-button>
                            </p>
                            <div class="divider"></div>
                            <div class="panel-label">Floating</div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>
